<template>
  <div class="f-header">
    <span class="logo">
      <el-icon class="mr-2">
        <el-icon><ChromeFilled /></el-icon>
      </el-icon>
      企业码道刘某
    </span>
    <el-icon class="icon-btn" @click="store.handleAsideWidth">
      <fold v-if="store.asideWidth === '250px'"/>
      <Expand v-else/>
    </el-icon>
    <el-tooltip effect="dark" content="刷新" placement="bottom">
      <el-icon class="icon-btn" @click="handleRefresh">
        <refresh/>
      </el-icon>
    </el-tooltip>

    <div class="ml-auto flex items-center">
      <el-tooltip effect="dark" content="全屏" placement="bottom">
        <el-icon class="icon-btn" @click="toggle">
          <full-screen v-if="!isFullscreen"/>
          <aim v-else/>
        </el-icon>
      </el-tooltip>
    </div>
  </div>

</template>
<script setup>
import {useFullscreen} from "@vueuse/core";
import {mainStore} from "@/store/index";

const store = mainStore()

const {
  // 是否全屏状态
  isFullscreen,
  // 切换全屏
  toggle,
} = useFullscreen();

// 刷新
const handleRefresh = () => location.reload();
</script>
<style lang="scss" scoped>
.f-header {
  @apply flex items-center text-slate-600 fixed top-0 left-0 right-0;
  background-color: #FFFFFF;
  height: 64px;
  z-index: 1000;
}

.logo {
  width: 250px;
  @apply flex justify-center items-center text-xl font-thin;
}

.icon-btn {
  @apply flex justify-center items-center mr-4;
  width: 42px;
  height: 64px;
  cursor: pointer;
}

.icon-btn:hover {
  @apply bg-stone-300;
}

.f-header .dropdown {
  height: 64px;
  cursor: pointer;
  @apply flex justify-center items-center mx-5;
}


.show_pwd {
  cursor: pointer;
  user-select: none;
  padding-right: 5px;
}

.intensity {
  .psdText {
    color: darkgray;
    font-size: 14px;
    margin-right: 10px;
  }

  .line {
    display: inline-block;
    width: 48px;
    height: 4px;
    background: #d8d8d8;
    border-radius: 3px;
    margin-right: 8px;

    &.low {
      background: #f4664a;
    }

    &.middle {
      background: #ffb700;
    }

    &.high {
      background: #54ec51;
    }

    &.safe {
      background: #2cbb79;
    }
  }

  .level {
    margin: 0 16px 0 8px;
  }

  .warningText {
    color: #5a5a5a;
    font-size: 12px;
    margin-top: 5px;
  }
}

</style>
